<template>
	<page-loading :show="orderList.length>0" mode='if'>
	<view class="wrap">
		<view class="tabWrap">
			<u-tabs-swiper ref="uTabs"   :list="list" active-color="#FBD220" :bold='false' :current="current" @change="tabsChange" :is-scroll="true" swiperWidth="750"></u-tabs-swiper>
		</view>
		
		<swiper class="swiperWrap" :duration="300" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					
					<view v-if="orderList.length>0">
						
					
					<view class="listWrap" v-for="(item, index) in orderList" :key="index" @click="goDetail(item)">
						<view class="flex pad-t-b-10 border-bottom-1">
							<view class="flex width-70">
									<view class="headImg"><image :src="item.headportrait" mode="aspectFit"></image></view>
								
								<view class="block-inline title">{{item.truename}}</view>
								<u-icon size="20" color="#666" name="arrow-right"></u-icon>
							</view>
							<view class="flex-jc-sb width-30 u-text-right color-EB5B01">
								<text>{{ returnStatus(item.status) }}</text>
							</view>
						</view>
						<view class="pad-t-b-10 border-bottom-1 ">
							<view class="flex pad-t-b-10 font-26">
								<view class="width-20 flex color-999 ">
									<view class="carImg"><image :src="item.brand_img" mode="aspectFit"></image></view>
									<view class="">车型:</view>
								</view>
								<view class="flex-jc-sb width-80 flex ">
									<view class=" width-75 color-333 font-28">{{ item.brand_name }} {{ item.car_type_name }} {{ item.configuration_name }}</view>
									<view class=" ">
										<!-- 	<view class="u-text-right color-333">￥{{ it.payable_amount }}</view>
												<view class="u-text-right color-999">x1</view> -->
									</view>
								</view>
							</view>
							<view class="flex pad-t-b-10 font-26">
								<view class=" width-20 color-999 ">订单号:</view>
								<view class="">{{item.order_no}}</view>
							</view>
							<view class="flex pad-t-b-10 font-26">
								<view class=" width-20 color-999 ">保养项目:</view>
								<view class="color-333" v-for="(it,ind) in item.maintenance_type_name" :key="ind">{{it}}</view>
							</view>
							<view class="flex pad-t-b-10 font-26">
								<view class=" width-20 color-999 ">下单时间:</view>
								<view class="color-333">{{returnTime(item.addtime)}}</view>
							</view>
							<view class="flex pad-t-b-10 font-26" v-if="item.status===30  && item.appointment_time">
								<view class=" width-20 color-999 ">预约时间:</view>
								<view class="color-333">{{returnTime(item.appointment_time)}}</view>
							</view>
						</view>

						<view class="">
							<view class="flex mt-5 font-26">
								<view class=" width-40 line40 ">共{{item.goods_count}}件商品，{{item.service_count}}项服务</view>
								<view class="flex-jc-sb width-30 line40 ">
									实付：
									<text class="color-333 font-bold">￥{{item.actual_payment}}</text>
								</view>

								<view class="flex-jc-sb  u-text-right pad-t-b-10 ml-30">
									<!-- 待备货 -->
									<button v-if="item.status === 20" class="btn-bg-yellow">备货入库</button>
									<!-- 待到店 -->
									<button v-else-if="item.status === 30" class="btn-bg-yellow">核销验码</button>
									<!-- 待施工 -->
									<button v-else-if="item.status === 40" class="btn-bg-yellow">派工</button>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="loadText[loadStatus]" />
					</view>
					<view class="" v-else>
						<defaultImg :show='showLoad'></defaultImg>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
	</page-loading>
</template>

<script src="./orderList.js"></script>

<style lang="scss" scoped>
@import './orderList.scss';
</style>
